@charset "utf-8";
*{
    margin:0;
    padding:0;
    list-style:none;
}
body{
    background:wheat;
}
ul{
    width:160px;
    position:fixed;
    top:200px;
    right:0;
    li{
        width:100%;
        height:30px;
        height:30px;
        margin-bottom:1px;
        position:relative;
        &:nth-of-type(1) p{
            transition-delay:0;
        }
         &:nth-of-type(2) p{
            transition-delay:100ms;
             background: green;
        }
         &:nth-of-type(3) p{
            transition-delay:200ms;
             background: green;
        }
         &:nth-of-type(4) p{
            transition-delay:300ms;
             background: green;
        }
         &:nth-of-type(5) p{
            transition-delay:400ms;
             background: green;
        }
         &:nth-of-type(6) p{
            transition-delay:500ms;
             background: green;
        }
         &:nth-of-type(7) p{
            transition-delay:600ms;
             background: green;
        }
        p{
            width:100%;
            position:absolute;
            left:130px;
            transition:all 300ms;
            span:first-child{
                display:block;
                float:left;
                width:30px;
                height:30px;
                line-height:30px;
                text-align:center;
                color:#fff;
                background:#406dbf;
            }
            span:last-child{
                display:block;
                float:left;
                width:130px;
                height:30px;
                line-height:30px;
                text-align:center;
                background: #fff;
                color:blue;
                font-size:12px;
            }
        }
        
    }
    &:hover p{
            left:0;
   }
}